<template>
    <div class="tab-content">
        <div class="tab-pane active" id="tab_27-1">
            <div class="tag-plugin quot">
                <p class="content" type="icon"><img class="icon prefix lazy entered loaded"
                        src="https://bu.dusays.com/2022/10/24/63567d3e07da3.png"
                        data-src="https://bu.dusays.com/2022/10/24/63567d3e07da3.png" data-ll-status="loaded"><span
                        class="text">写下了,就得干!</span><span class="empty"></span>
                </p>
            </div>
            <aside >
                <div class="tag-plugin timeline ds-timeline">
                    <div class="timenode" v-for="(item, index) in record" :key="index">
                        <div class="header"><span> {{ formatDate(item.created_at) }}
                                <div v-show="!item?.payload?.commits || item.payload.commits.length <= 0">
                                    <div class="body">
                                    
                                        <p class="title" v-show="item.type === `CreateEvent`">
                                            <span class="item comments">
                                                <b class="title">
                                                创建仓库
                                                </b>
                                            </span>
                                            <span class="item comments" v-if="item.repo !=null">
                                            <a :href="item.repo.url">
                                            {{item.repo.human_name }}
                                            </a> 
                                            </span>
                                        </p>
                                        <p class="title" v-show="item.type === null">
                                            <b class="title">
                                                仓库更新/删除仓库
                                            </b>
                                        </p>
                                        <div class="footer">
                                            <div class="flex right">
                                                <a class="item comments last" :href="item.actor.html_url"
                                                    target="_blank" rel="external nofollow noopener noreferrer">
                                                    <span>
                                                        <img class="icon prefix lazy entered loaded"
                                                            :src="item.actor.avatar_url"
                                                            style="width: 24px;height: 24px; display: flexbox;" />
                                                    </span>
                                                </a>
                                                <div style="margin-left: 8px;"><span>{{ item.actor.name
                                                        }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div v-if="item?.payload?.commits && item.payload.commits.length > 0">
                                    <div class="body">
                                        <p class="title" v-for="(commit, index) in item.payload.commits"
                                            :key="commit.sha">
                                            <a :href="commit.url" target="_blank"
                                                rel="external nofollow noopener noreferrer">{{ index + 1
                                                    + '、'
                                                }} {{
                                                    commit.message }}
                                            </a>
                                        </p>
                                        <span class="item comments"><a :href="item.repo.url">
                                            {{item.repo.human_name }}
                                        </a> </span>
                                        <div class="footer">
                                            <div class="flex right">
                                                <a class="item comments last" :href="item.actor.html_url"
                                                    target="_blank" rel="external nofollow noopener noreferrer">
                                                    <span>
                                                        <img class="icon prefix lazy entered loaded"
                                                            :src="item.actor.avatar_url"
                                                            style="width: 24px;height: 24px; display: flexbox;" />

                                                    </span>
                                                </a>
                                                <div style="margin-left: 8px;"><span>{{ item.actor.name
                                                        }}</span>
                                                </div>
                                            </div>
                                        </div>
                                  
                                    </div>
                                </div>
                            </span></div>
                    </div>
                </div>
            </aside>
        </div>
    </div>
</template>
<script>
import { getRecords } from '@/api/third'
export default {
    data() {
        return {
            record: [],
        };
    },
    mounted() {
        this.init()
    },
    methods: {
        init() {
            getRecords().then((res) => {
                this.record = res.data;
            }).catch((err) => {
                console.log(err);
            }).finally(() => {
                console.log('finally');
            });
        },
        formatDate(value) {  
            if (!value) return '';  
            const date = new Date(value);  
            return date.toLocaleString('zh-CN', { hour12: false }); // 你可以根据需要调整日期时间格式  
        }  
    },
};
</script>
<style lang="scss">
.tab-content{
    padding: 10px;
}
</style>